<template>
	<div class="view-signUp">
		<div class="signUp-main flex flex-direction-v">
			<h3 class="title">注册</h3>
			<mt-field label="手机号" placeholder="请输入手机号" v-model="phone"></mt-field>
			<mt-field label="用户名" placeholder="请输入用户名" v-model="userName"></mt-field>
			<mt-field label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
			<mt-field label="确认密码" placeholder="请再次输入密码" type="password" v-model="confirmPassword"></mt-field>
			<div class="flex flex-center-vh">
				<mt-button @click="submitSignUpForm" class="submit-signUp" type="default" plain>确定</mt-button>
			</div>
			<router-link to="signIn" class="link-signIn-main">
				<mt-button class="link-signIn" size="small" plain>已有账号，马上登录</mt-button>
			</router-link>
		</div>
	</div>
</template>

<script>
	import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
	import _userService from '@/service/userService';

	export default {
		name: 'SignUp',
		data() {
			return {
				phone: '',
				userName: '',
				password: '',
				confirmPassword: '',
			}
		},
		created() {
			let vm = this;
		},
		computed: {},
		methods: {
			// 用户注册
			postUserSignUp() {
				let vm = this
				let data
				let res = _userService.signUp({
					'phone': vm.phone,
					'userName': vm.userName,
					'password': vm.password,
					'confirmPassword': vm.confirmPassword,
					'success': function(response) {
						data = response.data;
						console.log('用户注册接口：' + data.message);
					}
				})
				return res
			},
			submitSignUpForm() {
				let vm = this;
				vm.postUserSignUp();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.view-signUp {
		.signUp-main {
			padding: 20px;
			.title {
				margin-bottom: 20px;
				text-align: center;
			}
			.submit-signUp {
				display: block;
				width: 96%;
				margin-top: 20px;
			}
			.link-signIn-main {
				width: 98%;
				text-align: right;
				.link-signIn {
					margin-top: 20px;
					border: none;
				}
			}
		}
	}
</style>